<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Shampoo Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--<link href='http://fonts.googleapis.com/css?family=Open+Sans:100,400,300,300italic,400italic,600,600italic,700,700italic,800,800italic&amp;subset=latin,latin-ext' rel='stylesheet' type='text/css'/>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap-select.min.css" />
<link rel="stylesheet" type="text/css" href="css/datepicker.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-timepicker.min.css" />
<link rel="stylesheet" type="text/css" href="css/perfect-scrollbar.css" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/responsive.css" />
<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->
</head>

<body>
	<div class="header navbar navbar-fixed-top">
    	<div class="wrapper-home-header">
            <div class="row-fluid">
                <div class="span4 social-div">
                	<ul class="social-network">
                    	<li><a href="#"><div class="social-element twitter" atl="Twitter" title="Twitter"></div></a></li>
                        <li><a href="#"><div class="social-element facebook" atl="Facebook" title="Facebook"></div></a></li>
                        <li><a href="#"><div class="social-element google" atl="Google Plus" title="Google Plus"></div></a></li>
                        <li><a href="#"><div class="social-element instagram" atl="Instagram" title="Instagram"></div></a></li>
                    </ul>
                </div>
                <div class="span4 logo-cls">
                    <a href="index.html" class="logo"><img src="img/logo.png" /></a>
                    <div class="clearfix"></div>
                    <img class="header-slogan" src="img/slogan.png" />
                </div>
                <div class="span4 welcome-div">
                    <div class="sign-block pull-right">
                     	<span class="welcome">Welcome</span>
                        <div class="clearfix"></div>
                        <div class="dropdown pull-left">
	                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Sign In</a>
                            <div class="dropdown-menu dropdown-menu-right signin-form" id="signin_form">
                            	<div class="row-fluid">
                                    <div class="span12 register-form-slogan">
                                        SIGN IN!
                                    </div>
                                </div>
                            	<div class="row-fluid">
                                	<div class="span5 sign-in-icons">
                                    	<div class="vertical-line"></div>
                                        <div class="vertical-or">OR</div>
                                        <div class="vertical-line second"></div>
                                        <div class="row-fluid">
                                            <div class="span12 signup-network">
                                                <div class="row-fluid">
                                                    <div class="span12 sigup-block">
                                                        <div class="ico-network ico-tweeter"></div>
                                                        <div class="ico-network ico-facebook"></div>
                                                        <div class="ico-network ico-google"></div>
                                                        <div class="ico-network ico-yahoo"></div>
                                                        <div class="ico-network ico-paypal"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                	</div>
                                    <div class="span7">
                                        <div class="row-fluid">
                                            <div class="span12 signin-wrapper">
                                            	<div class="clearfix-custom-20"></div>
                                                <div class="row-fluid">
                                                    <div class="span12">
                                                        <div class="control-group">
                                                            <label class="control-label">Email Address</label>
                                                            <div class="controls">
                                                                <input type="text" class="input-medium span12" placeholder="" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row-fluid">
                                                    <div class="span12">
                                                        <div class="control-group">
                                                            <label class="control-label label-password">Password</label>
                                                            <a href="#" class="pull-right">Forgot Password?</a>
                                                            <div class="controls">
                                                                <input type="password" class="input-medium span12" placeholder="" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row-fluid" align="right">
                                                	<div class="span12">
                                                        <a href="#" class="btn-signin">Sign In</a>
													</div>
                                                </div>
                                                <div class="row-fluid" align="right">
                                                	<div class="span12">
                                                        <span>Not yet a member? <a href="#">Sign up here</a></span>
													</div>
                                                </div>
                                            </div>
                                        </div>
                            		</div>
                            	</div>
                            </div>
    					</div>
                        <div class="dimeter pull-left">&nbsp;&nbsp;OR&nbsp;&nbsp; </div>
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">Register</a>
                            <div class="dropdown-menu dropdown-menu-right register-form" id="register_form">
                            	<div class="row-fluid">
                                    <div class="span12 register-form-slogan">
                                        Join The Shampoo Community In A Few Seconds!
                                    </div>
                                </div>
                            	<div class="row-fluid">
                                	<div class="span5 sign-in-icons">
                                    	<div class="vertical-line sign-up"></div>
                                        <div class="vertical-or sign-up">OR</div>
                                        <div class="vertical-line sign-up second"></div>
                                        <div class="row-fluid">
                                            <div class="span12 signup-network">
                                                <h5 align="center">Sign up using one of your networks:</h5>
                                                <div class="clearfix"></div>
                                                <div class="row-fluid">
                                                    <div class="span12 sigup-block">
                                                        <div class="ico-network ico-tweeter"></div>
                                                        <div class="ico-network ico-facebook"></div>
                                                        <div class="ico-network ico-google"></div>
                                                        <div class="ico-network ico-yahoo"></div>
                                                        <div class="ico-network ico-paypal"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                	</div>
                                    <div class="span7">
                                        <div class="row-fluid">
                                            <div class="span12 signup-wrapper">
                                                <h5 align="center">Create your account the long way:</h5>
                                                <div class="clearfix"></div>
                                                <div class="row-fluid">
                                                    <div class="span6">
                                                        <div class="control-group">
                                                            <label class="control-label">First Name</label>
                                                            <div class="controls">
                                                                <input type="text" class="input-medium span12" placeholder="" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="span6">
                                                        <div class="control-group">
                                                            <label class="control-label">Last Name</label>
                                                            <div class="controls">
                                                                <input type="text" class="input-medium span12" placeholder="" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row-fluid">
                                                    <div class="span6">
                                                        <div class="control-group">
                                                            <label class="control-label">Email</label>
                                                            <div class="controls">
                                                                <input type="text" class="input-medium span12" placeholder="" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="span6">
                                                        <div class="control-group">
                                                            <label class="control-label">Mobile Phone</label>
                                                            <div class="controls">
                                                                <input type="text" class="input-medium span12" placeholder="" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row-fluid">
                                                    <div class="span6">
                                                        <div class="control-group">
                                                            <label class="control-label">Password</label>
                                                            <div class="controls">
                                                                <input type="password" class="input-medium span12" placeholder="" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="span6">
                                                        <div class="control-group">
                                                            <label class="control-label">Confirm Password</label>
                                                            <div class="controls">
                                                                <input type="password" class="input-medium span12" placeholder="" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row-fluid">
                                                    <div class="span12">
                                                        <div class="control-group day-of-birth">
                                                            <label class="control-label">Date of birth</label>
                                                            <div class="controls">
                                                                <div class="input-append date" id="birthday" data-date="" data-date-format="dd-mm-yyyy">
                                                                    <input class="span10" readonly="" type="text" value="">
                                                                    <span class="add-on"><i class="icon-th icon-white"></i></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row-fluid" align="center">
                                                	<div class="span12">
                                                        <span class="term-of-service">By clicking SIGN UP you confirm that you accept the <a href="#">Terms of service</a></span>
                                                        <div class="clearfix-custom-10"></div>
                                                        <a href="#" class="btn-signup pull-right">Sign Up</a>
													</div>
                                                </div>
                                            </div>
                                        </div>
                            		</div>
                            	</div>
                            </div>
    					</div>
                    </div>
                </div>
            </div>
            <div class="row-fluid navi">
            	<div class="span12">
                    <div class="navbar">
                        <div class="navbar-inner">
                            <div class="container">
                                <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
                                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </a>
                                <!-- Everything you want hidden at 940px or less, place within here -->
                                <div class="nav-collapse collapse">
                                	<div class="navi-wrap">
                                        <ul class="navigation">
                                            <li class="nav-first nav-active"><a href="#">Home</a></li>
                                            <li><a href="browser-search.html">Browse</a></li>
                                            <li><a href="#">My Favourites</a></li>
                                            <li><a href="#">Hot Deals</a></li>
                                        </ul>
									</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    	</div>
    </div>
    <div class="homepage-content content">
        <section class="main-slider">
            <div class="wrapper">
            	<div id="narrow_down" class="narrow-down">
                	<div class="relative-cls">
	                	<div class="see-more">See More</div>
    				</div>
                </div>
                <div id="search_box" class="search-box">
                    <div class="row-fluid">
                        <div class="span12">
                            <img class="search-box-slogan" src="img/reserve.png" />
                            <a id="advance_search_bt" class="advance-search-bt" href="javascript:void(0)">Advanced Search <i id="advance_search_icon" class="icon-chevron-down icon-white pull-right"></i></a>
                            <div class="row-fluid">
                            	<div class="span5">
                                    <div class="control-group">
                                        <div class="controls">
                                            <input type="text" class="input-medium span12 input-find" placeholder="Find: Spa, Manicure, Hair Cut, etc." />
                                        </div>
                                    </div>
                            	</div>
                                <div class="span5">
                                    <div class="control-group">
                                        <div class="controls">
                                            <input type="text" class="input-medium span12" placeholder="Near: Orchard Road (Or Leave Bank)" />
                                        </div>
                                    </div>
                               	</div>
                                <div class="span2">
                                    <div class="view-list-div"><a href="#" class="btn-view-list">View Listings</a></div>
                                </div>
                        	</div>
                        </div>
                    </div>
                    <div class="row-fluid advance-search-fluid" id="advance_search">
                    	<div class="span12">
                        	<div class="row-fluid">
                            	<div class="span4">
                                	<div class="control-group day-of-birth">
                                        <div class="controls">
                                        	<label class="control-label">On</label>
                                            <div class="input-append date" id="on_date" data-date="" data-date-format="dd-mm-yyyy">
                                                <input class="span12 advance-search" placeholder="dd-mm-yyyy" type="text" value="">
                                                <span class="add-on advance-search-addon"><i class="icon-th icon-white advance-search-icon"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="span4">
                                	<div class="control-group">
                                        <div class="controls">
                                        	<label class="control-label">At</label>
                                            <div class="input-append bootstrap-timepicker">
                                                <div class="input-append bootstrap-timepicker">
                                                    <input id="start_time" placeholder="hh:mm" type="text" class="input-small span12 advance-search">
                                                    <span class="add-on advance-search-addon"><i class="icon-time icon-white advance-search-icon"></i></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="span4">
                                	<div class="control-group">
                                        <div class="controls">
                                        	<label class="control-label">To</label>
                                            <div class="input-append bootstrap-timepicker">
                                                <div class="input-append bootstrap-timepicker">
                                                    <input id="to_time" placeholder="hh:mm" type="text" class="input-small span12 advance-search">
                                                    <span class="add-on advance-search-addon"><i class="icon-time icon-white advance-search-icon"></i></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--slider-->
            <div class="row-fluid">
                <div class="span12">
                    <div id="myCarousel" class="carousel slide carousel-fade">
                        <ol class="carousel-indicators">
                            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                            <li data-target="#myCarousel" data-slide-to="1"></li>
                            <li data-target="#myCarousel" data-slide-to="2"></li>
                            <li data-target="#myCarousel" data-slide-to="3"></li>
                        </ol>
                        <!-- Carousel items -->
                        <div class="carousel-inner">
                            <div class="active item">
                                <img class="slide-img" src="img/slides/slide4.jpg"/>
                                <div class="wrapper carousel-caption-cls">
                                    <div class="slide-caption">
                                        <div class="caption-text">
                                        	<div class="pull-left">
                                                <a href="#"><img class="ico-caption-calendar" src="img/unfavourite.png" /></a>
                                                <span class="title-caption-content">Sky-Hight Lux Spa</span>
                                                <div class="clearfix"></div>
                                                <span class="title-caption-price">Price from $25</span>
                                            </div>
                                            <div class="pull-left">
                                                <img class="thumb-caption" src="img/thumb-caption/1.jpg"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class ="item">
                                <img class="slide-img" src="img/slides/slide5.jpg" />
                                <div class="wrapper carousel-caption-cls">
                                    <div class="slide-caption">
                                        <div class="caption-text">
                                        	<div class="pull-left">
                                                <a href="#"><img class="ico-caption-calendar" src="img/favourite.png" /></a>
                                                <span class="title-caption-content">Facial at Lux Spa</span>
                                                <div class="clearfix"></div>
                                                <span class="title-caption-price">Price from $15</span>
											</div>
                                            <div class="pull-left">
	                                            <img class="thumb-caption" src="img/thumb-caption/2.jpg"/>
    										</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <img class="slide-img" src="img/slides/slide6.jpg" />
                                <div class="wrapper carousel-caption-cls">
                                    <div class="slide-caption">
                                        <div class="caption-text">
                                        	<div class="pull-left">
                                                <a href="#"><img class="ico-caption-calendar" src="img/unfavourite.png" /></a>
                                                <span class="title-caption-content">Massages at Spa</span>
                                                <div class="clearfix"></div>
                                                <span class="title-caption-price">Price from $55</span>
                                            </div>
                                            <div class="pull-left">
                                                <img class="thumb-caption" src="img/thumb-caption/3.jpg"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <img class="slide-img" src="img/slides/slide7.jpg" />
                                <div class="wrapper carousel-caption-cls">
                                    <div class="slide-caption">
                                        <div class="caption-text">
                                        	<div class="pull-left">
                                                <a href="#"><img class="ico-caption-calendar" src="img/favourite.png" /></a>
                                                <span class="title-caption-content">Relax at Spa</span>
                                                <div class="clearfix"></div>
                                                <span class="title-caption-price">Price from $35</span>
                                            </div>
                                            <div class="pull-left">
                                                <img class="thumb-caption" src="img/thumb-caption/4.jpg"/>
											</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Carousel nav -->
                        <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                        <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
                    </div>
                </div>                        
            </div>
        </section>
        <section class="middle">
            <div class="wrapper">
                <h3 class="text-center home-title">Or Choose From One Of The Categories Below. Book An Appointment <a href="#">Today!</a></h3>
                <div class="row-fluid">
                    <ul class="home-services">
                        <li class="span2 service-block">
                            <a href="#">
                                <div class="service-image img-massages">
                                    
                                </div>						
                                <span class="title">Massages</span>	
                            </a>
                        </li>
                        <li class="span2">
                            <a  href="#">
                                <div class="service-image img-haircut">
                                
                                </div>						
                                <span class="title">Hair Cut</span>
                            </a>
                        </li>
                        <li class="span2">
                            <a  href="#">
                                <div class="service-image img-mani">
                                
                                </div>						
                                <span class="title">Mani Pedi</span>	
                            </a>
                        </li>
                        <li class="span2">
                            <a  href="#">
                                <div class="service-image img-yoga">
                                
                                </div>						
                                <span class="title">Yoga</span>
                            </a>
                        </li>
                        <li class="span2">
                            <a  href="#">
                                <div class="service-image img-housekeeping">
                                
                                </div>						
                                <span class="title">House Keeping</span>
                            </a>
                        </li>
                        <li class="span2">
                            <a  href="#">
                                <div class="service-image img-haircolor">
                                
                                </div>						
                                <span class="title">Hair Color</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="row-fluid">
                    <ul class="home-services">
                        <li class="span2 service-block">
                            <a href="#">
                                <div class="service-image img-dog">
                                    
                                </div>						
                                <span class="title">Dog Grooming</span>	
                            </a>
                        </li>
                        <li class="span2">
                            <a  href="#">
                                <div class="service-image img-dental">
                                
                                </div>						
                                <span class="title">Dental Exam</span>
                            </a>
                        </li>
                        <li class="span2">
                            <a  href="#">
                                <div class="service-image img-waxing">
                                
                                </div>						
                                <span class="title">Waxing</span>	
                            </a>
                        </li>
                        <li class="span2">
                            <a  href="#">
                                <div class="service-image img-facial">
                                
                                </div>						
                                <span class="title">Facial</span>
                            </a>
                        </li>
                        <li class="span2">
                            <a  href="#">
                                <div class="hot-deals">
                                
                                </div>						
                                <span class="title">HOT DEALS</span>
                            </a>
                        </li>
                        <li class="span2">
                            <a  href="#">
                                <div class="see-all-service">
                                	<a href="#">+50 More</a>
                                </div>						
                                <span class="title">See All Services</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
         <section>
            <div class="wrapper">
                <div class="business-owner">
                    
                </div>
            </div>
        </section>
    </div>
    <footer>
        <div class="footer-bottom">
        	<div class="wrapper">
                <div class="row-fluid">
                    <div class="span3 get-powered-div">
                    	<div class="get-powered-wrap">
	                        <span class="get-powered pull-left">Get powered by</span><a class="pull-left" href="index.html"><div class="logo-bottom"></div></a>
    					</div>
                    </div>
                    <div class="span6 copyright" align="center">
                        © 2013, <a href="#"> Shampoo</a>. Developed by <a href="#">Cloud-Link Pte Ltd</a>
                        <br>
                        <a href="#">Privacy Policy</a> | <a href="#">Terms and Conditions</a>
                    </div>
                    <div class="span3 social-div">
                        <ul class="social-network pull-right">
                            <li><a href="#"><div class="social-element twitter" atl="Twitter" title="Twitter"></div></a></li>
                            <li><a href="#"><div class="social-element facebook" atl="Facebook" title="Facebook"></div></a></li>
                            <li><a href="#"><div class="social-element google" atl="Google Plus" title="Google Plus"></div></a></li>
                            <li><a href="#"><div class="social-element instagram" atl="Instagram" title="Instagram"></div></a></li>
                        </ul>
                        <!--<a id="back-top" href="#"><div class="narrow-up"></div></a>-->
                    </div>
                </div>
			</div>
		</div>
    </footer>
<script src="js/jquery.1.9.js"></script> 
<!--<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>-->
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/bootstrap-timepicker.min.js"></script>
<script src="js/jquery.swing.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="js/perfect-scrollbar.js"></script>
<script src="js/shampoo.js"></script>
</body>
</html>
